<template>
  <Header></Header>
  <div class="course-filter">
    <div class="filter-main">
      <div class="filter-item">
        <div class="item-title">课程方向：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li v-for="item in firstList" :key="item.id" @click="changeFirst(item.id)"
            :class="currentId == item.id ? 'filter-all' : ''">{{ item.categoryName }}</li>
        </ul>
      </div>
      <div class="filter-item">
        <div class="item-title">课程分类：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li v-for="item in secondList" :key="item.id" @click="changeSecond(item.id)"
            :class="currentId == item.id ? 'filter-all' : ''">{{ item.categoryName }}</li>
        </ul>
      </div>
      <div class="filter-item">
        <div class="item-title">课程难度：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li v-for="item in levelList" :key="item.id" @click="changeLevel(item.id)"
            :class="currentId == item.id ? 'filter-all' : ''">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="course-list">
    <div class="list-main">
      <div class="list-top">
        <ul>
          <li v-for="item in courseFilter" :key="item.id" :class="item.id !== 4 ? 'line' : ''"
            @click="changeFilter(item.id, item.status)">
            <span :class="currentIdx === item.id ? 'active' : ''">{{ item.name }}</span>
            <div class="caret" v-if="item.id === 4">
              <el-icon :size="8" :color="item.status === 'price-asc' ? '#2c81ff' : ''">
                <CaretTop />
              </el-icon>
              <el-icon :size="8" :color="item.status === 'price-desc' ? '#2c81ff' : ''">
                <CaretBottom />
              </el-icon>
            </div>
          </li>
        </ul>
        <div>
          <el-radio-group v-model="radio" @change="tabCourse">
            <el-radio label="1">免费课程</el-radio>
            <el-radio label="2">会员免费课程</el-radio>
          </el-radio-group>
        </div>
      </div>
      <ul class="list-center">
        <li v-for="item in courseList" :key="item.id" @click="goDetail(item.id)">
          <img :src="item.courseCover" alt="">
          <div class="course-content">
            <h3>{{ item.courseName }}</h3>
            <div>{{ courseTypeFn(item.courseLevel) }} · {{ item.clicks }}人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <div class="price-total">￥ {{ item.discountPrice }}</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="list-bottom">
        <el-pagination background layout="prev, pager, next" :total="courseTotal" @current-change="currentChange" />
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
import { getFirstCategorys, getSecondCategorys, courseSearch } from '@/utils/api/course.js'
// hooks
import courseType from '@/hooks/courseType'
const { courseTypeFn } = courseType()
// 一级分类
const firstList = ref([])
// 二级分类
const secondList = ref([])
// 课程难度
const levelList = ref([
  { name: '初阶', id: 1 },
  { name: '中阶', id: 2 },
  { name: '高阶', id: 3 },
])
// 课程列表
const courseList = ref([])
// 课程数量
const courseTotal = ref(0)
// 查询课程参数
const courseParams = reactive({
  pageNum: 1,
  pageSize: 8,
  entity: {
    firstCategory: '',
    secondCategorys: '',
    courseLevel: '',
    sortBy: '',
    isMember: '',
    isFree: ''
  }
})
// 课程条件筛选的数据
const courseFilter = ref([
  { id: 1, name: '综合' },
  { id: 2, name: '最新课程' },
  { id: 3, name: '最多购买' },
  { id: 4, name: '价格', status: '' },
])
const currentIdx = ref(1)
const currentId = ref(null)
// 获取一级分类
getFirstCategorys().then(res => {
  firstList.value = res.data.list
  secondCategorys({
    categoryId: -1
  })
})
// 点击一级分类
const changeFirst = (id) => {
  currentId.value = id
  secondCategorys({
    categoryId: id
  })
  courseParams.entity.firstCategory = id
  courseParams.entity.secondCategory = ''
  courseParams.entity.courseLevel = ''
  courseParams.entity.isMember = ''
  courseParams.entity.isFree = ''
  getCourseSearch(courseParams)
}
// 获取二级分类
const secondCategorys = (params) => {
  getSecondCategorys(params).then(res => {
    secondList.value = res.data.list
  })
}
// 点击二级分类
const changeSecond = (id) => {
  currentId.value = id
  courseParams.entity.courseLevel = ''
  courseParams.entity.secondCategory = id
  courseParams.entity.isMember = ''
  courseParams.entity.isFree = ''
  getCourseSearch(courseParams)
}
// 查询课程
const getCourseSearch = (data) => {
  courseSearch(data).then(res => {
    courseList.value = res.data.pageInfo.list
    courseTotal.value = res.data.pageInfo.total
  })
}
getCourseSearch(courseParams)
// 改变难易
const changeLevel = (id) => {
  currentId.value = id
  courseParams.entity.courseLevel = id
  getCourseSearch(courseParams)
}
// 点击课程筛选
const changeFilter = (id, status) => {
  currentIdx.value = id
  if (id === 1) {
    courseParams.entity.sortBy = ''
    courseFilter.value[3].status = ''
  } else if (id === 2) {
    courseParams.entity.sortBy = 'time-desc'
    courseFilter.value[3].status = ''
  } else if (id === 3) {
    courseParams.entity.sortBy = 'clicks-desc'
    courseFilter.value[3].status = ''
  } else if (id === 4) {
    if (status === 'price-desc' || status === '') {
      courseFilter.value[3].status = 'price-asc'
    } else {
      courseFilter.value[3].status = 'price-desc'
    }
    courseParams.entity.sortBy = courseFilter.value[3].status
  }
  courseParams.entity.isMember = ''
  courseParams.entity.isFree = ''
  getCourseSearch(courseParams)
}
// 免费课程和会员课程筛选
const radio = ref(0)
const tabCourse = (val) => {
  console.log(val)
  if (val === '1') {
    courseParams.entity.isMember = ''
    courseParams.entity.isFree = 1
  } else if (val === '2') {
    courseParams.entity.isMember = 1
    courseParams.entity.isFree = ''
  }
  getCourseSearch(courseParams)
}
const currentChange = (val) => {
  courseParams.pageNum = val
  getCourseSearch(courseParams)
}
// 跳转课程详情页
const router = useRouter()
const goDetail = (id) => {
  router.push({
    path: '/course/detail',
    query: {
      id
    }
  })
}
</script>

<style lang="scss" scoped>
.course-filter {
  width: 100%;
  height: 197px;
  background: #f3f5f9;

  .filter-main {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .filter-item {
      display: flex;
      align-items: center;

      .item-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-left: 20px;
      }

      ul {
        display: flex;
        align-items: center;
        justify-content: center;

        li {
          margin-right: 30px;
          font-size: 14px;
          color: #515759;
          font-weight: 400;
          text-align: center;
          cursor: pointer;
          padding: 0 3px;

          &.filter-all {
            line-height: 30px;
            color: #388fff;
            font-size: 14px;
            background: rgba(44, 128, 255, .1);
            border-radius: 5px;
          }
        }
      }
    }
  }
}

.course-list {
  padding: 50px 0;
  background: white;

  .list-main {
    width: 1000px;
    margin: 0 auto;

    .list-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      ul {
        display: flex;

        li {
          font-size: 14px;
          font-weight: 400;
          color: #515759;
          margin-right: 16px;
          display: flex;
          align-items: center;
          cursor: pointer;

          span {
            &.active {
              color: #2c81ff;
            }
          }

          &+li {
            margin-left: 16px;
          }

          &.line {
            position: relative;

            &:after {
              content: '';
              position: absolute;
              right: -16px;
              top: 0;
              width: 1px;
              height: 100%;
              background: #dbd9d9;
            }
          }

          .caret {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .list-center {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        box-sizing: border-box;
        width: 240px;
        height: 275px;
        background: #fff;
        box-shadow: 1px 3px 3px rgba(27, 39, 94, .1);
        opacity: 1;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        margin-top: 38px;

        &:last-child {
          &:nth-child(4n+2) {
            margin-right: calc((100% - 240px) / 3 * 2);
          }

          &:nth-child(4n+3) {
            margin-right: calc((100% - 240px) / 3 * 1);
          }
        }

        img {
          width: 240px;
          height: 153px;
        }

        .course-content {
          padding: 7px 16px;

          h3 {
            font-size: 12px;
            color: #333;
          }

          >div {
            font-size: 12px;
            color: #808080;
            padding: 7px 0;
          }

          .price {
            display: flex;

            &-vip {
              width: 64px;
              height: 16px;
              background: linear-gradient(90deg, #ff928e 0%, #fe7062 100%);
              border-radius: 16px 0 16px 0;
              text-align: center;
              color: #fff;
              margin-right: 3px;
            }

            &-total {
              font-size: 12px;
              color: #ff727f;
            }
          }
        }
      }
    }

    .list-bottom {
      padding-top: 50px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>